<template>
    <el-collapse>
        <el-collapse-item name="1" class="collapse">
            <template #title>
                <span class="collapseTitle">
                    普通组件
                </span>
            </template>
            <div>
                <draggable
                    :list="list"
                    ghost-class="ghostClass"
                    chosen-class="chosenClass"
                    animation="300"
                    :force-fallback="true"
                    :sort="false"
                    :group="{name:'lowcode',pull:'clone',put:false}"
                    @start="onStart"
                    :clone="cloneDefaultField"
                    item-key="sourceId"
                >
                    <template #item="{ element }">
                        <div class="itemClass">
                            {{ element.name }}
                        </div>
                    </template>
                </draggable>
            </div>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import draggable from "vuedraggable";
import {deepCopy} from "@/utils/tagCreate";

export default {
    name: "CommonIndex",
    components: {
        draggable
    },
    data() {
        return {
            list: [
                {
                    name: "普通按钮", title: "按钮编辑", component: "ButtonComponent", drawerComponent: "ButtonDrawer", sourceId: 1,
                    propJson: {
                        editFlag: true,
                        type: "default",
                        buttonName: "默认",
                        plain: false,
                        round: false,
                        size: "default",
                        iconBefore: "",
                        iconAfter: "",
                        iconOnly: "",
                        circle: false,
                        clickBehavior: "NONE",
                        bindVariableList: [],
                        apiPath: "",
                        apiType: "MSOA",
                        apiMethod: "GET",
                        apiParamList: [],
                        apiResponseList: [],
                        apiResponseJsonPath: "",
                        spanStyleLineHeight: "",
                        spanStyleFontSize: "",
                        spanStyleAlignCenter: false,
                        spanStyleJustifyCenter: false,
                        spanStyleFontColor: "",
                        spanStyleFontFamily: "",
                        isLoading: false,
                        clickAction: [{isAsyncAction: false}],
                        isCustomColor: false,
                        customColor: "",
                        isAddBadge: false,
                        badgeBindVariable: "",
                        badgeMaxNum: 100,
                        badgeIsBot: false,
                        badgeType: "primary",
                        isAddMessage: false, // 是否添加事件结束弹框
                        badgeValue: {optionValueType: "custom", optionsCustom: "", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                    }
                },
                {
                    name: "文本", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 2,
                    propJson: {
                        editFlag: true,
                        type: "custom",
                        customInfo: "span字体",
                        variableName: "",
                        apiPath: "",
                        apiType: "MSOA",
                        apiMethod: "GET",
                        apiParamList: [],
                        apiResponseJsonPath: "",
                        spanStyleLineHeight: "",
                        spanStyleFontSize: "",
                        spanStyleAlignCenter: false,
                        spanStyleJustifyCenter: false,
                        spanStyleFontColor: "",
                        spanStyleFontFamily: "",
                        isForEach: false,
                        forEachParam: [],
                        isBlock: false,
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        isClickCopy: false, // 是否开启点击复制
                        isClickAction: false, // 是否添加点击事件
                        clickActionType: "routeTo", // 点击事件类型 routeTo - 触发跳转路由   action - 触发相关事件
                        clickActionInfo: { // 点击事件配置
                            actionList: [],
                            routeToInfo: {}
                        }
                    }
                },
                {
                    name: "表格", title: "表格编辑", component: "TableComponent", drawerComponent: "TableDrawer", sourceId: 4,
                    propJson: {
                        editFlag: true,
                        tableDataType: "custom",
                        tableDataCustomType: "Array",
                        tableDataCustomInfo: "[{\"id\": \"001\", \"name\": \"zhangsan\",\"age\": 20},{\"id\": \"002\", \"name\": \"lisi\",\"age\": 22},{\"id\": \"003\", \"name\": \"wangwu\",\"age\": 23}]",
                        tableDataParam: "",
                        tableFieldList: [{variableLabel: "ID", showType: "variable", customHTML: "", variableField: "id", isAlignCenter: "left"},{variableLabel: "姓名", showType: "variable", customHTML: "", variableField: "name", isAlignCenter: "left"}],
                        tableDataVariable: "",
                        isBorder: false,
                        isStripe: false,
                        isOverFlowTip: false,
                        isMaxHeight: false,
                        maxHeight: "",
                        isAddOperate: false,
                        operateHtml: "",
                        operateName: "",
                        isSelection: false,
                        selectVarParamName: "",
                        operationWidth: 300,
                        isTreeView: false, // 是否启用树形展示
                        rowKey: "id", // 树形展示时需要rowKey
                        childrenName: "children", // 树形信息字段名
                        isShowAllChildren: false, // 是否展示所有子信息
                    }
                },
                {
                    name: "分页",
                    title: "分页编辑",
                    component: "PaginationComponent",
                    drawerComponent: "PaginationDrawer",
                    sourceId: 5,
                    propJson: {
                        editFlag: true,
                        currentPageType: "custom",
                        currentPageCustom: "1",
                        currentPageVariable: "",
                        pageSizeType: "custom",
                        pageSizeCustom: "1",
                        pageSizeVariable: "",
                        totalType: "custom",
                        totalCustom: "10",
                        totalVariable: "",
                        layOutPosition: "left",
                        paginationSizeType: "default",
                        isBackground: true,
                        pageSizeListType: "custom",
                        pageSizeList: "[10, 20, 30, 50, 100, 200, 400]",
                        paginationLayoutPrevFlag: true,
                        paginationLayoutPrevNum: 1,
                        paginationLayoutPagerFlag: true,
                        paginationLayoutPagerNum: 2,
                        paginationLayoutNextFlag: true,
                        paginationLayoutNextNum: 3,
                        paginationLayoutJumperFlag: true,
                        paginationLayoutJumperNum: 4,
                        paginationLayoutSizesFlag: true,
                        paginationLayoutSizesNum: 5,
                        paginationLayoutTotalFlag: true,
                        paginationLayoutTotalNum: 6,
                        apiType: "MSOA",
                        apiPath: "",
                        apiMethod: "GET",
                        pageChangeInnerRequestVariable: [{
                            name: "内置参数 currentPage",
                            variableName: "",
                            type: "custom",
                            variableParamName: ""
                        }, {name: "内置参数 pageSize", variableName: "", type: "custom", variableParamName: ""}],
                        pageChangeActionRequestList: [],
                        pageChangeActionResponseList: [],
                        paginationActionList: [{isAsyncAction: false}]
                    }
                },
                {
                    name: "进度条", title: "进度条编辑", component: "PercentageComponent", drawerComponent: "PercentageDrawer", sourceId: 6,
                    propJson: {
                        editFlag: true,
                        actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}, // 百分比值
                        type: "line", // 进度条类型 line - 条状  circle - 圆形
                        strokeWidth: 10, // 进度条的宽度 - 粗度
                        isTextInside: false, // 展示文字是否在进度条内部 - 只在type为line下生效
                        isShowText: true, // 是否展示进度条文字内容
                        isStriped: false, // 是否添加条纹
                        stripedFlow: false, // 是否进行条纹滚动
                        width: 126, // type为circle时。设置宽度
                        isIndeterminate: false, // 是否进行动画滚动
                        duration: 20, // 动画流动速度
                    }
                },
                {
                    name: "消息提示", title: "消息提示编辑", component: "AlertMessageComponent", drawerComponent: "AlertMessageDrawer", sourceId: 7,
                    propJson: {
                        editFlag: true,
                        titleActionInfo: {optionValueType: "custom", optionsCustom: "标题", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        descriptionActionInfo: {optionValueType: "custom", optionsCustom: "描述", optionsCustomValueType: "String", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                        type: "success", // 提示类型  success/warning/info/error
                        isClosable: false, // 是否支持关闭
                        isCenter: false, // 文字是否居中
                        isShowIcon: false, // 是否展示图标
                        effect: "dark", // 主题颜色 dark - 深色  light - 浅色
                    }
                },
                {
                    name: "标签页", title: "标签页编辑", component: "TabsComponent", drawerComponent: "TabsDrawer", sourceId: 8,
                    propJson: {
                        editFlag: true,
                        isDynamic: false, // 是否为动态标签列表
                        dynamicLabelInfo: {
                            optionValueType: "custom", optionsCustom: "[]", optionsCustomValueType: "Array", optionsVariableParam: "",
                            apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                            isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []
                        },
                        dynamicComponentList: [
                            {
                                name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                                propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                                    actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                                        apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                                }
                            }
                        ],
                        tabsInfoList: [
                            {
                                labelInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                                    apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                    isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []},
                                labelContentComponentList: [
                                    {
                                        name: "普通SPAN", title: "SPAN文字编辑", component: "SpanComponent", drawerComponent: "SpanDrawer", sourceId: 32,
                                        propJson: {type: "custom", customInfo: "span字体", variableName: "", apiPath: "",
                                            actionInfo: {optionValueType: "custom", optionsCustom: "span字体", optionsCustomValueType: "String", optionsVariableParam: "",
                                                apiType: "MSOA", apiPath: "", apiMethod: "GET", apiParamList: [], apiResponseList: [], apiResponseJsonPath: "",
                                                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                }
            ]
        }
    },
    methods: {
        cloneDefaultField(e) {
            return deepCopy(e);
        },
        onStart(e) {
            e.item._underlying_vm_.id = this.generateUUID();
        },
        randomNumber() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        },
        generateUUID() {
            return (this.randomNumber() + this.randomNumber() + "-" + this.randomNumber() + "-" + this.randomNumber() +
                "-" + this.randomNumber() + "-" + this.randomNumber() + this.randomNumber() + this.randomNumber());
        }
    }
}
</script>

<style scoped lang="less">
.collapse {
    .collapseTitle {
        padding-left: 2%;
        font-size: 15px;
        font-weight: bold;
    }
    .ghostClass {

    }
    .chosenClass {

    }
    .itemClass {
        font-size: 13px;
        color: #606266;
        text-align: center;
        width: 90%;
        line-height: 250%;
        margin-left: 5%;
        //去除光标
        caret-color: transparent;
        background-color: #FAFCFF;
        transition: box-shadow 0.3s ease;
        border: 1px solid #F0F2F5;
        border-radius: 5px;
        margin-bottom: 2%;
    }
    .itemClass:hover{
        cursor: pointer;
        color: #409EFF;
        background-color: #EBEEF5;
    }
}
</style>